iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
影片教學

CSS 實作小品30天系列 第 16

Day16-CSS 滑鼠 hover 卡片時打開卡片的效果

  • 分享至 

  • xImage
  •  

主要原理就是利用 transform: rotate 這個 CSS 屬性。

Demo link

Yes


上一篇
Day15-CSS 條紋背景的按鈕
下一篇
Day17-CSS 製作剪紙文字效果
系列文
CSS 實作小品30天31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
TerryYu
iT邦新手 5 級 ‧ 2020-09-22 20:17:25

看了codepen使用hover經過時會一閃一閃的

看更多先前的回應...收起先前的回應...
harry xie iT邦研究生 1 級 ‧ 2020-09-22 22:43:42 檢舉

對XD,卡片打開時有一瞬間右邊出現卷軸

TerryYu iT邦新手 5 級 ‧ 2020-09-23 00:10:17 檢舉

想了老半天想不出解法...
您有解決方法嗎?

我自己只能改成這樣
https://codepen.io/terry-yu-the-vuer/pen/abNPOEg

harry xie iT邦研究生 1 級 ‧ 2020-09-23 00:31:01 檢舉

你卡片的高度改小一點就可以了,我原本做的稍微大了點

TerryYu iT邦新手 5 級 ‧ 2020-09-23 12:06:14 檢舉

原來如此@@
功力太淺

我要留言

立即登入留言